import { useState } from 'react';
import { motion } from 'framer-motion';
import { toast } from 'sonner';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import { useLanguage } from '@/contexts/LanguageContext';
import { getImageUrl } from '@/lib/utils';

export default function Contact() {
  const { t } = useLanguage();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // Simulate form submission
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      toast.success(t('messageSentSuccess'));
      setFormData({ name: '', email: '', subject: '', message: '' });
    } catch (error) {
      toast.error(t('messageSentError'));
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-grow">
        {/* Contact Hero Section */}
        <section className="relative h-64 md:h-80 flex items-center">
           <div className="absolute inset-0 z-0">
             <img 
               src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Customer%20service%20team%20with%20headsets%20assisting%20customers%25in%20modern%20office&sign=d15fdf3454a93bffe2d7a23cb069c23f" 
               alt={t('contactHeroAlt')} 
               className="w-full h-full object-cover transition-transform duration-700 hover:scale-105"
             />             
             <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/30"></div>
           </div>
          
          <div className="container mx-auto px-4 relative z-10">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
            >
              <h1 className="text-3xl md:text-5xl font-bold text-white mb-4">{t('contactTitle')}</h1>
              <p className="text-lg md:text-xl text-gray-100 max-w-2xl">{t('contactSubtitle')}</p>
            </motion.div>
          </div>
        </section>
        
        {/* Contact Content */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              {/* Contact Form */}
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <div className="bg-white p-8 rounded-xl shadow-md">
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">{t('sendUsMessage')}</h2>
                  
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                      <div>
                        <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                          {t('yourName')}
                        </label>
                        <input
                          type="text"
                          id="name"
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          required
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        />
                      </div>
                      
                      <div>
                        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                          {t('emailAddress')}
                        </label>
                        <input
                          type="email"
                          id="email"
                          name="email"
                          value={formData.email}
                          onChange={handleChange}
                          required
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        />
                      </div>
                    </div>
                    
                    <div>
                      <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-1">
                        {t('subject')}
                      </label>
                      <input
                        type="text"
                        id="subject"
                        name="subject"
                        value={formData.subject}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      />
                    </div>
                    
                    <div>
                      <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
                        {t('yourMessage')}
                      </label>
                      <textarea
                        id="message"
                        name="message"
                        rows={5}
                        value={formData.message}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none"
                      ></textarea>
                    </div>
                    
                    <button
                      type="submit"
                      disabled={isSubmitting}
                      className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors flex items-center justify-center"
                    >
                      {isSubmitting ? (
                        <>
                          <i className="fa-solid fa-spinner fa-spin mr-2"></i>
                          {t('sending')}
                        </>
                      ) : (
                        <>
                          {t('sendMessage')}
                          <i className="fa-solid fa-paper-plane ml-2"></i>
                        </>
                      )}
                    </button>
                  </form>
                </div>
              </motion.div>
              
              {/* Contact Info */}
              <div className="space-y-8">
                <motion.div
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.8, delay: 0.2 }}
                  viewport={{ once: true }}
                >
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">{t('contactInformation')}</h2>
                  
                  <div className="space-y-6">
                    <div className="flex items-start">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                        <i className="fa-solid fa-map-marker-alt"></i>
                      </div>
                      <div className="ml-4">
                        <h3 className="text-sm font-medium text-gray-900 mb-1">{t('ourLocation')}</h3>
                        <p className="text-gray-600">123 Global Street, International City, IC 10001</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                        <i className="fa-solid fa-phone"></i>
                      </div>
                      <div className="ml-4">
                        <h3 className="text-sm font-medium text-gray-900 mb-1">{t('phoneNumber')}</h3>
                        <p className="text-gray-600">+1 (555) 123-4567</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                        <i className="fa-solid fa-envelope"></i>
                      </div>
                      <div className="ml-4">
                        <h3 className="text-sm font-medium text-gray-900 mb-1">{t('emailUs')}</h3>
                        <p className="text-gray-600">support@globalshop.com</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                        <i className="fa-solid fa-clock"></i>
                      </div>
                      <div className="ml-4">
                        <h3 className="text-sm font-medium text-gray-900 mb-1">{t('workingHours')}</h3>
                        <p className="text-gray-600">{t('mondayFriday')}: 9:00 AM - 6:00 PM</p>
                        <p className="text-gray-600">{t('saturday')}: 10:00 AM - 4:00 PM</p>
                      </div>
                    </div>
                  </div>
                </motion.div>
                
                <motion.div
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.8, delay: 0.4 }}
                  viewport={{ once: true }}
                >
                  <div className="bg-white p-8 rounded-xl shadow-md">
                    <h2 className="text-2xl font-bold text-gray-900 mb-6">{t('followUs')}</h2>
                    
                    <div className="flex space-x-4">
                      <a 
                        href="#" 
                        className="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white hover:bg-blue-700 transition-colors shadow-md hover:shadow-lg"
                        aria-label="Facebook"
                      >
                        <i className="fa-brands fa-facebook"></i>
                      </a>
                      <a 
                        href="#" 
                        className="w-12 h-12 rounded-full bg-blue-400 flex items-center justify-center text-white hover:bg-blue-500 transition-colors shadow-md hover:shadow-lg"
                        aria-label="Twitter"
                      >
                        <i className="fa-brands fa-twitter"></i>
                      </a>
                      <a 
                        href="#" 
                        className="w-12 h-12 rounded-full bg-pink-600 flex items-center justify-center text-white hover:bg-pink-700 transition-colors shadow-md hover:shadow-lg"
                        aria-label="Instagram"
                      >
                        <i className="fa-brands fa-instagram"></i>
                      </a>
                      <a 
                        href="#" 
                        className="w-12 h-12 rounded-full bg-blue-800 flex items-center justify-center text-white hover:bg-blue-900 transition-colors shadow-md hover:shadow-lg"
                        aria-label="LinkedIn"
                      >
                        <i className="fa-brands fa-linkedin"></i>
                      </a>
                    </div>
                    
                    <div className="mt-6 pt-6 border-t border-gray-100">
                      <h3 className="text-sm font-medium text-gray-900 mb-3">{t('newsletter')}</h3>
                      <div className="flex">
                        <input 
                          type="email" 
                          placeholder={t('yourEmail')}
                          className="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        />
                        <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition-colors">
                          <i className="fa-solid fa-paper-plane"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </motion.div>
              </div>
            </div>
          </div>
        </section>
        
        {/* Map Section */}
        <section className="py-0 bg-gray-100">
          <div className="aspect-video bg-gray-200 relative overflow-hidden">
            {/* This would be replaced with an actual map component in a real application */}


          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}